<template>
    <div class="scrap">
        <div class="scrap-container">
            <a-row class="scrap-top">
                <a-col :span="2" class="black-bold">机构名称：</a-col>
                <a-col :span="5" class="select-value">
                    <a-tree-select
                        v-model:value="value"
                        show-search
                        style="width: 100%"
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                        allow-clear
                        tree-default-expand-all
                        :tree-data="powerTreeData"
                    />
                   
                </a-col>
                <!-- <a-col :span="3" class="black-bold">绝缘工具名称：</a-col>
                <a-col :span="5" class="select-value">
                    <a-select
                    v-model:value="value2"
                    show-search
                    placeholder=" "
                    style="width: 200px"
                    :options="toolList"
                    ></a-select>
                </a-col> -->
                <a-col :span="3" class="black-bold">
                    <a-button type="primary" @click="handleOrg(value)" class="btn">查询</a-button>
                </a-col>
            </a-row>
            <div class="search" v-if="flag">
                <a-tooltip>
                <template #title>prompt text</template>
                提醒： <span>{{work}}</span>车间<span>{{team}}</span>班组编号为<span>{{ number }}</span>的<span>{{ toolName }}</span> 已报废<span></span>
                </a-tooltip>
                <!-- <a-button @click="handleDetailClick()" class="btn">详情查看</a-button> -->
              </div>
            
        </div>
        <div class="content-bottom">
            <a-table :dataSource="dataSource" :columns="columns" :bordered="true" :pagination="{pageSize:5}" class="table-content">
                <template #bodyCell="{ column, record }">
                    <template v-if="column.key === 'operation'">    
                    <button type="primary" danger class="style" @click="handleHistoryRecord(record)">实验历史数据</button>     
                </template>
                    </template>
                
            </a-table>
        </div>
        <TrialHistoryModal ref="showTrialHistory"></TrialHistoryModal>
    </div>
</template>
<script setup>
    import { ref,onMounted } from 'vue'
    import request from '@/utils/request'
    import TrialHistoryModal from './TrialHistoryModal.vue'

    const number=ref()
    const toolName=ref('')
    const work=ref('')
    const team=ref('')

    const flag=ref(false)

    const showTrialHistory=ref(null)

    const value=ref('')
    const value2=ref('')
    const toolList = ref([]);

    const dataSource=ref([])

    //后台调取机构名称的数据
    const powerTreeData = ref([]);

    const columns=ref( [
        {
            title: '车间',
            dataIndex: 'workshop',
            key: 'workshop',
            align:'center'
        },
        {
            title: '班组',
            dataIndex: 'team',
            key: 'team',
            align:'center'
        },
        {
            title: '编号',
            dataIndex: 'number',
            key: 'number',
            align:'center'
        },
        {
            title: '是否补充',
            dataIndex: 'isSupplement',
            key: 'isSupplement',
            align:'center'
        },
        {
            title: '规格型号',
            dataIndex: 'specification',
            key: 'specification',
            align:'center'
        },
        {
            title: '保管人',
            dataIndex: 'keeper',
            key: 'keeper',
            align:'center'
        },
        {
            title: '实验日期',
            dataIndex: 'testDate',
            key: 'testDate',
            align:'center'
        },
        {
            title: '有效截止日期',
            dataIndex: 'expireDate',
            key: 'expireDate',
            align:'center'
        },
        {
            title: '试验人',
            dataIndex: 'tester',
            key: 'tester',
            align:'center'
        },
        {
            title: '审核人',
            dataIndex: 'auditor',
            key: 'auditor',
            align:'center'
        },
        {
            title: '投运日期',
            dataIndex: 'operatedate',
            key: 'operatedate',
            align:'center'
        },
        {
            title: '试验结论',
            dataIndex: 'conclusion',
            key: 'conclusion',
            align:'center'
        },
        {
            title: '操作',
            dataIndex: 'operation',
            key: 'operation',
            align:'center'
        },
    ])

    // 加载数据
    // const loadData = async () => {
    //     let result = await request.get('/api/quota/optionalTools')
    //     result.data.data.map(item => {
    //         // console.log(item);
    //         let obj = {
    //             value: item.name,
    //             label: item.name,
    //         }
    //         toolList.value.push(obj);
    //     });
    // }

    onMounted(async() => {
        // loadData()
    const res=await request({
        url:'/scrap/selectall',
        method:'get'
    })
    // console.log(111)
    dataSource.value=res.data.data
    console.log(res)

    //加载机构名称
    const result = await request({
        url:'/sys/orgTree',
        method:'get',
        params:{
        speciality:2
        }
    })
    powerTreeData.value=result.data.data[0].children[0].children

    })

    //查询按钮
    // const handleSearchClick = async(value) =>{
    // // console.log(value);
    //     // const result = await request.get(`/feathers/gd-base-info?insulatedEquipment=${value}`)
    //     // data.value = result.data.data
    // }

    const handleOrg =async(value)=>{

        const teamValue=ref([])
        const res = await request.get(`/sys/getSubOrg`)
        teamValue.value=res.data.data

        const orgName=ref('')
        for(var i=0;i < teamValue.value.length;i++){
        if(value===teamValue.value[i].orgId){
        orgName.value=teamValue.value[i].orgName
        }
        }
        console.log(orgName.value)
        
        const result = await request({
            url:'/scrap/list',
            method:'get',
            params:{
                orgName:orgName.value
            }
        })
        console.log(result.data.data)
        dataSource.value=result.data.data

        const result2 = await request({
            url:'/scrap/listwithoutsup',
            method:'get',
            params:{
                orgName:orgName.value
            }
        })
        if(result2.data.data[0]){
            number.value=result2.data.data[0].id
            toolName.value=result2.data.data[0].name
            work.value=result2.data.data[0].workshop
            team.value=result2.data.data[0].team
            flag.value=true
        }
        // console.log(result2)
    }
    const handleHistoryRecord=(record)=>{
        showTrialHistory.value.showModal(record)
    }
</script>
<style scoped>
span{
  font-weight: 700;
}
.search{
  height: 50px;
  width: 750px;
  background-color: rgb(242, 253, 224);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.scrap{
    background-color: white;
    height: 100%;
    font-size: 20px;
}
.scrap-container{
    margin-left:50px;
    /* margin-top: 10px; */
}
.scrap-container .scrap-top{
    margin-bottom: 10px;
}
.scrap-container .black-bold{
    font-weight: bold;
    margin-top: 10px;
    font-size: 20px;
}
.scrap-container .select-value{
    margin-top: 10px;
}
.detail-look{
    background-color: #169bd5;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
    color: white;
    margin-left: 10px;
    height: 35px;
}
.content-bottom{
    margin-top: 10px;
}
.btn{
    background-color: #169bd5;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
    color: white;
    height: 38px;
    width: 80px;
    text-align: center;
    padding: 0;
    margin-left: 20px;
}
.style{
    background-color: #169bd5;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
    color: white;
    font-size: 14px;
    /* margin-right: 10px; */
}
</style>


